<template>
  <div class="box">
    <div v-if="isShowImg">
      <img :src="imgUrl? imgUrl:url" class="avatar" @click="onImgClick">
      <!-- <i class="el-icon-circle-close icon" /> -->
    </div>
    <div v-else class="uploadImg" @click="$refs.file.click()">
      <span>上传图片</span>
    </div>
    <i class="el-icon-circle-close icon" />
    <input ref="file" type="file" name="file" hidden @change="onFileChange">
  </div>
</template>

<script>
export default {
  props: {
    imgUrl: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      url: '',
      isShowImg: false
    }
  },
  methods: {
    onFileChange() {
      const file = this.$refs.file.files[0]
      const date = window.URL.createObjectURL(file)
      // console.log(date)
      this.isShowImg = true
      this.url = date
      this.$emit('successImg', date)
    },
    onImgClick() {
      this.$refs.file.click()
      this.onFileChange()
    }
  }
}
</script>

<style lang="scss" scoped>
.uploadImg {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  width: 100px !important;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
.box {
  position: relative;
  height: 60px;
  i {
    position: absolute;
    color: burlywood;
    top: -5px;
    right: -5px;
    font-size: 16px;
  }
}
.avatar {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  width: 100px;
  height: 60px;
  display: block;
  overflow: hidden;
  i {
    position: absolute;
    top: -8px;
    right: -6px;
    font-size: 16px;
  }
}
</style>
